<template>
  <div class="wrap">
    <router-view ref="childRoute"></router-view>

    <!-- 父路由 -->
    <div class="parentRoute" :class="this.$route.path=='/contract/buildTeam'?'':'no_active'">
      <div class="header_form">
        <el-form ref="form" :model="contractForm" label-width="80px">
          <el-form-item label="合同编号:">
            <el-input v-model="contractForm.contractNo"></el-input>
          </el-form-item>
          <el-form-item label="关联项目:">
            <el-select v-model="contractForm.relation" placeholder="请选择">
              <el-option v-for="item in relationList" :key="item.id" :value="item.id" :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="乙方名称:">
            <el-input v-model="contractForm.constructionContact"></el-input>
          </el-form-item>
          <el-form-item label="联系人:" style="clear:both">
            <el-input v-model="contractForm.constructionName"></el-input>
          </el-form-item>
          <el-form-item label="联系方式:">
            <el-input v-model="contractForm.constructionPhone"></el-input>
          </el-form-item>
          <el-form-item label="创建日期:">
            <el-date-picker type="date" placeholder="选择日期" v-model="contractForm.createDate" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="clear:both">
            <el-button type="primary" @click="searchBuildTeamContract">查询</el-button>
            <el-button @click="resetContract">取消</el-button>
          </el-form-item>
        </el-form>

        <!-- 新增材料采购合同 -->
        <div class="add_contract">
          <el-button type="primary" @click="goAddContract">新增施工班组合同</el-button>
        </div>
      </div>

      <!-- 材料采购合同表 -->
      <div class="stuff_table">
        <template>
          <el-table :data="contractData" border style="width: 95%">
            <el-table-column type="index" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="contractNo" label="合同编号" width="180">
            </el-table-column>
            <el-table-column prop="contractName" label="合同名称" width="150">
            </el-table-column>
            <el-table-column prop="projectName" label="关联项目" width="150">
            </el-table-column>
            <el-table-column prop="heTongMoney" label="合同金额(万)" width="120">
            </el-table-column>
            <el-table-column prop="constructionName" label="乙方名称" width="150">
            </el-table-column>
            <el-table-column prop="constructionContact" label="联系人">
            </el-table-column>
            <el-table-column prop="constructionPhone" label="联系方式">
            </el-table-column>
            <el-table-column prop="name" label="创建人">
            </el-table-column>
            <el-table-column prop="createDate" label="创建日期" width="170">
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button @click="editBuildTeamContract(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteDialog=true,delBuildTeamContract(scope.row)" type="text" size="small">删除
                </el-button>
                <el-button @click="buildTeamContractDetails(scope.row)" type="text" size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <!-- 确认删除弹框 -->
        <el-dialog title="删除确认" :visible.sync="deleteDialog" width="30%" :before-close="handleClose">
          <p class="text_one">是否确认删除该合同</p>
          <p class="text">删除后将不可恢复</p>
          <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialog = false">取 消</el-button>
            <el-button type="primary" @click="deleteDialog = false,confirmDel()">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 不可删除弹框 -->
        <el-dialog title="删除提示" :visible.sync="confirmDelDialog" width="30%" :before-close="handleClose">
          <p class="text_one">该表绑定了若干数据</p>
          <p class="text">暂不支持删除操作</p>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmDelDialog = false">我知道了</el-button>
          </span>
        </el-dialog>

        <!-- 页码 -->
        <div id="pages">
          <el-pagination background layout="prev, pager, next" @current-change="handelTeamCurrentPage"
            :current-page="teamCurrentPage" :page-size="teamPageSize" :total="teamTotal">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>
<style src="./style/stuff.css">
</style>
<script>
import typeMixin from "../../../minxins/contractMixin/typeMixin";
export default {
  mixins: [typeMixin],
  data () {
    return {
      // 分页
      teamCurrentPage: 1,
      teamPageSize: 10,
      teamTotal: 1,
      // 删除弹框
      deleteDialog: false,
      // 删除状态
      isAllow: false,
      // rowId
      rowId: '',
      // 不可删除弹框
      confirmDelDialog: false,
      // 多条件查询
      contractForm: {
        // 乙方名称
        constructionContact: "",
        // 项目联系人
        constructionName: "",
        // 联系人手机
        constructionPhone: "",
        // 项目编号
        contractNo: "",
        // 创建日期
        createDate: "",
        // 当前页
        currentPage: '',
        // 展示条数
        pageSize: '',
        // 项目ID
        projectId: ""
      },
      // 施工班组合同表
      contractData: [
        {
          // 乙方名称
          constructionContact: "",
          // 项目联系人
          constructionName: "",
          // 联系人手机
          constructionPhone: "",
          // 施工方ID
          constructionTeamId: "",
          // 合同名称
          contractName: "",
          // 合同编号
          contractNo: "",
          // 创建日期
          createDate: "",
          // 合同金额
          heTongMoney: "",
          // id
          id: "",
          // 创建人
          name: "",
          // 项目id
          projectId: "",
          // 项目名称
          projectName: ""
        }
      ],
    };
  },
  methods: {
    // 弹框关闭确认
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    // 分页查询
    handelTeamCurrentPage (index) {
      this.teamCurrentPage = index;
    },
    // 新增路由跳转
    goAddContract () {
      this.$router.push('/contract/buildTeam/addContract')
      setTimeout(() => {
        this.isShow = this.$refs.childRoute;
      }, 100);
    },
    // 查看施工班组合同详情
    buildTeamContractDetails (row) {
      this.$router.push({ path: '/contract/buildTeam/editTeamDetailsContract', query: { id: row.id } })
    },
    // 编辑施工班组合同
    editBuildTeamContract (row) {
      this.$router.push({ path: '/contract/buildTeam/editTBuildeamContract', query: { id: row.id } })
    },

    // -------------------api部分------------------------------------------------------------
    // 获取施工班组合同
    getBuildTeamContract () {
      this.contractForm.currentPage = this.teamCurrentPage;
      this.contractForm.pageSize = this.teamPageSize
      this.$contractApi.getBuildTeamContract(this.contractForm).then(res => {
        if (res.data.code == 200) {
          this.contractData = res.data.data
          this.teamTotal = res.data.total
        }
      })
    },
    // 多条件查询施工班组
    searchBuildTeamContract () {
      this.$contractApi.getBuildTeamContract(this.contractForm).then(res => {
        if (res.data.code == 200) {
          this.contractData = res.data.data
          console.log(res);
        }
      })
    },
    // 重置表
    resetContract () {
      this.getBuildTeamContract()
    },
    // 删除施工班组合同
    delBuildTeamContract (row) {
      if (this.rowId == '') {
        this.rowId = row.id
      }
      if (this.isAllow) {
        this.$contractApi.delBuildTeamContract(this.rowId).then((res) => {
          if (res.data.code == 200) {
            this.$message.warning(res.data.msg)
          } else if (res.data.code == 306) {
            this.confirmDelDialog = true
            console.log(res);
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
    // 确认删除
    confirmDel () {
      this.isAllow = true;
      this.delBuildTeamContract();
    },
  },
  created () {

  },
  mounted () {
    // console.log(this.test);
    this.getBuildTeamContract()
    this.getRelation()
  },
  computed: {
  },
  watch: {
    // $route: {
    //   // 判断是否回退父路由
    //   handler (val) {
    //     if (this.$route.path == val.path) {
    //       this.isShow = ''
    //     }
    //   },
    //   // 一进页面就执行
    //   immediate: true,
    //   // 深度观察监听
    //   deep: true
    // }
  }
};
</script>

<style scoped lang="less">
</style>
